<template>
    <div class="set-service">
        <!-- 导航栏 -->
        <tz-breadcrumb :title='["商家", "商家列表","支付业务设置",nav]' :pathArr='[{"name": "商家"},{"name": "商家列表", "url": "/storeList"},{"name": "支付业务设置", "url": "/payment"},{"name": nav}]'></tz-breadcrumb>
        <div class="step-contain">
            <!-- 步骤 -->
            <el-steps :active="active" finish-status="success">
                <el-step title="1.资料信息上传"></el-step>
                <el-step title="2.结算信息填写"></el-step>
                <el-step title="3.绑定微信支付通道"></el-step>
                <el-step title="添加成功！"></el-step>
            </el-steps>
            <form>
            <div class="step1" v-show = "active == 0">
                <div class="title">1.资料信息上传</div>
                <div class="step1-content">
                  <el-row class="rows">
                        <el-col :span="6">
                            <div class="images">
                                <img :src="showImg + img1" class="imgshow" v-if="img1 != ''"/>
                                <img src="./../../public/img/add.png" class="addimg" v-if="img1 == ''">
                                <p v-if="img1 == ''">添加证照</p>
                                <input type="file" name=""  class="avatar-uploader" @change="fileChange($event,'img1')" >

                            </div>
                            <p class="text-center text-contain">身份证(正面)</p>
                        </el-col>
                        <el-col :span="6">
                            <div class="images">
                                <img :src="showImg + img2" class="imgshow" v-if="img2 != ''"/>
                                <img src="./../../public/img/add.png" class="addimg" v-if="img2 == ''">
                                <p v-if="img2 == ''">添加证照</p>
                                <input type="file" name=""  class="avatar-uploader" @change="fileChange($event,'img2')" >
                            </div>
                            <p class="text-center text-contain">身份证(反面)</p>
                        </el-col>
                        <el-col :span="6">
                            <div class="images">
                                <img :src="showImg + img3" class="imgshow"  v-if="img3 != ''"/>
                                <img src="./../../public/img/add.png" class="addimg" v-if="img3 == ''">
                                <p v-if="img3 == ''">添加证照</p>
                                <input type="file" name=""  class="avatar-uploader" @change="fileChange($event,'img3')" >
                                <!-- <div class="show">
                                    <div class="look">
                                       点击查看大图
                                    </div>
                                    <div class="again">
                                       重新上传
                                    </div>
                                </div> -->
                            </div>
                            
                            <p class="text-center text-contain">营业执照</p>
                        </el-col>
                        <el-col :span="6">
                            <div class="images">
                                <img :src="showImg + img4" class="imgshow" v-if="img4 != ''"/>
                                <img src="./../../public/img/add.png" class="addimg" v-if="img4 == ''">
                                <p  v-if="img4 == ''">添加证照</p>
                                <input type="file" name=""  class="avatar-uploader" @change="fileChange($event,'img4')" >
                            </div>
                            <p class="text-center text-contain">特种行业经营资质</p>
                        </el-col>
                    </el-row>
                    <p class="tips">注：身份证有国徽的一面是正面,有头像的一面是反面</p>
                    <el-row class="rows">
                        <el-col :span="6">
                            <div class="images">
                               <img :src="showImg + img5" class="imgshow" v-if="img5 != ''"/>
                                <img src="./../../public/img/add.png" class="addimg" v-if="img5 == ''">
                                <p  v-if="img5 == ''">添加证照</p>
                                <input type="file" name=""  class="avatar-uploader" @change="fileChange($event,'img5')" >
                            </div>
                            <p class="text-center text-contain">门头照</p>
                        </el-col>
                        <el-col :span="6">
                            <div class="images">
                                <img :src="showImg + img6" class="imgshow" v-if="img6 != ''"/>
                                <img src="./../../public/img/add.png" class="addimg" v-if="img6 == ''">
                                <p v-if="img6 == ''">添加证照</p>
                                <input type="file" name=""  class="avatar-uploader" @change="fileChange($event,'img6')" >
                            </div>
                            <p class="text-center text-contain">内景照_1</p>
                        </el-col>
                        <el-col :span="6">
                            <div class="images">
                                <img :src="showImg + img7" class="imgshow" v-if="img7 != ''"/>
                                <img src="./../../public/img/add.png" class="addimg" v-if="img7 == ''">
                                <p v-if="img7 == ''">添加证照</p>
                                <input type="file" name=""  class="avatar-uploader" @change="fileChange($event,'img7')" >
                            </div>
                            <p class="text-center text-contain">内景照_2</p>
                        </el-col>
                        <el-col :span="6">
                            <div class="images">
                                <img :src="showImg + img8" class="imgshow" v-if="img8 != ''"/>
                                <img src="./../../public/img/add.png" class="addimg"  v-if="img8 == ''">
                                <p v-if="img8 == ''">添加证照</p>
                                <input type="file" name=""  class="avatar-uploader" @change="fileChange($event,'img8')" >
                            </div>
                            <p class="text-center text-contain">内景照_3</p>
                        </el-col>
                    </el-row>
                </div>
                <div class="text-center bottom-btn">
                    <el-button>返回</el-button>
                    <el-button type="primary"  @click="next(1)">下一步</el-button>
                </div>
            </div>
            <div class="step2" v-show = "active == 1">
                 <div class="title">2.结算信息填写</div>
                  <el-form class="form"  :model="form" label-width="90px" label-position='left'>
                    <el-form-item label="账户类型" size="small" class="el-form-item" >
                        <el-select v-model="form.accounttype" placeholder="请选择账户类型">
                            <el-option
                            v-for="item in form.options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="开户名称" size="small" class="el-form-item">
                        <el-input v-model="form.name" placeholder="请填写开户名称（需与营业执照登记公司名称一致）"></el-input>
                    </el-form-item>
                    <el-form-item label="开户银行" size="small" class="el-form-item">
                        <el-select v-model="form.bank" placeholder="请选择开户银行">
                            <el-option
                            v-for="item in form.bankoptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                     <el-form-item label="开户行城市" size="small" class="el-form-item">
                        <el-cascader v-model="form.cityone[0]"
                            :options="form.cityoptions" 
                             @change="handleChange"
                        ></el-cascader>
                    </el-form-item>
                    <el-form-item label="开户支行" size="small" class="el-form-item">
                        <el-input v-model="form.bankarea" placeholder="请选择开户支行"></el-input>
                    </el-form-item>
                    <el-form-item label="银行账号" size="small" class="el-form-item">
                        <el-input v-model="form.bankaccount" placeholder="请填写银行账号"></el-input>
                    </el-form-item>
                  </el-form>
                <div class="text-center bottom-btn">
                    <el-button @click="returnone">上一步</el-button>
                    <el-button type="primary"  @click="next(2)">下一步</el-button>
                </div>
            </div>
            <div class="step3" v-show = "active == 2">
                <div class="title">3.绑定微信支付通道</div>
                <div>
                <el-radio v-model="radio" label="1">微信官方支付通道</el-radio>
                <el-radio v-model="radio" label="2">小微商户</el-radio>
                </div>
                <el-form class="form" ref="form" :model="form" label-width="90px" label-position='left'>
                    <el-form-item label="商户名称" size="small" class="el-form-item">
                        <el-input v-model="form.userName" placeholder="请填写商户名称"></el-input>
                    </el-form-item>
                    <el-form-item label="商户号" size="small" class="el-form-item">
                        <el-input v-model="form.userNumber" placeholder="请填写商户号"></el-input>
                    </el-form-item>
                    <el-form-item label="公众号" size="small" class="el-form-item">
                        <el-input v-model="form.commonNumber" placeholder="请填写银行账号"></el-input>
                    </el-form-item>
                </el-form>
                <div class="text-center bottom-btn">
                    <el-button @click="returnone">上一步</el-button>
                    <el-button type="primary"  @click="next(3)">下一步</el-button>
                </div>
            </div>
            </form>
            <div class="step4" v-show = "active == 3">
                <div class="success_contain">
                        <el-row>
                            <el-col :xs="3" :sm="3" :md="3" :lg="2" :xl="2" :offset="7"><div class="grid-content"><img src="./../../public/img/success.png"></div></el-col>
                            <el-col :xs="7" :sm="7" :md="7" :lg="8" :xl="8">
                              <div class="grid-content text-left">
                                <h3>添加成功！</h3>
                                <p>您已成功添加通道店铺ID为o2088912091622699</p>
                                <p>费率为 0.38% ；当面付费率为 0.38% 的微信支付通道</p>
                              </div>
                            </el-col>
                            
                        </el-row>
                        
                 </div>               
                 <div class="bottom-btn text-center">
                    <el-button type="primary" >完成</el-button>
                </div>
            </div>           
        </div>
    </div>
</template>

<script>
import api from './../../api/api';
import http from './../../config/index';
import tzBreadcrumb from './../../components/breadcrumb/breadcrumb.vue';
export default {
  components: {
    'tz-breadcrumb': tzBreadcrumb
  },
  data () {
    return {
      nav: '开通业务',
      active: 0,
      radio: '1',
      form: {
        userName: '',
        userNumber: '',
        commonNumber: '',
        name: '',
        bankarea: '',
        bankaccount: '',
        accounttype: '',
        bank: '',
        cityone: [],
        options: [{
          value: '选项1',
          label: '微信'
        }, {
          value: '选项2',
          label: '支付宝'
        }, {
          value: '选项3',
          label: '银行卡'
        }],
        bankoptions: [{
          value: '选项1',
          label: '建设银行'
        }, {
          value: '选项2',
          label: '招商银行'
        }, {
          value: '选项3',
          label: '商业银行'
        }],
        cityoptions: [{
          value: 'zhejiang',
          label: '浙江',
          children: [{
            value: 'shejiyuanze',
            label: '杭州'
          }, {
            value: 'daohang',
            label: '温州'
          }]
        }, {
          value: 'zujian',
          label: '江苏',
          children: [{
            value: 'basic',
            label: '南昌'
          }]
        }]
      },
      baseUrl: api.baseUrl + api.upimg,
      imageUrl: '',
      img1: '',
      img2: '',
      img3: '',
      img4: '',
      img5: '',
      img6: '',
      img7: '',
      img8: '',
      showImg: api.baseUrl + api.showImg
    };
  },
  methods: {
    next (index) {
      console.log(this.form.cityone);
      if (index === 1) {
        if (this.img1 === '') {
          alert('身份证正面照不能为空');
          return false;
        } else if (this.img2 === '') {
          alert('身份证反面照不能为空');
          return false;
        } else if (this.img3 === '') {
          alert('营业执照不能为空');
          return false;
        } else if (this.img5 === '') {
          alert('门头照不能为空');
          return false;
        } else if (this.img6 === '') {
          alert('内景照_1不能为空');
          return false;
        } else if (this.img7 === '') {
          alert('内景照_2不能为空');
          return false;
        } else if (this.img8 === '') {
          alert('内景照_3不能为空');
          return false;
        }
      } else if (index === 2) {
        if (this.form.accounttype === '') {
          alert('账户类型不能为空');
          return false;
        } else if (this.form.name === '') {
          alert('开户名称不能为空');
          return false;
        } else if (this.form.bank === '') {
          alert('开户银行不能为空');
          return false;
        } else if (this.form.cityone[0] === 0 || this.form.cityone[0] === null) {
          alert('开户行城市不能为空');
          return false;
        } else if (this.form.bankarea === '') {
          alert('开户支行不能为空');
          return false;
        } else if (this.form.bankaccount === '') {
          alert('银行账号不能为空');
          return false;
        }
      } else if (index === 3) {
        if (this.form.userName === '') {
          alert('商户名称不能为空');
          return false;
        } else if (this.form.userNumber === '') {
          alert('商户号不能为空');
          return false;
        } else if (this.form.commonNumber === '') {
          alert('公众号不能为空');
          return false;
        }
      }
      if (this.active++ > 2) this.active = 0;
    },
    returnone () {
      if (this.active-- > 2) this.active = 0;
    },
    handleChange (value) {
      console.log(value);
      if (value.length === 2) {
        this.form.cityone[0] = value[1];
      } else {
        this.form.cityone[0] = value[0];
      };
      console.log(this.form.cityone);
    },
    handleAvatarSuccess: function (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    fileChange (event, img) {
      var file = event.target.files;
      http.upImg(api.upimg, {
        file: file[0]
      }, response => {
        this[img] = response.data[0].file_code;
        console.log(this);
      }, err => {
        console.log(err);
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
.set-service
  .step-contain
    padding:15px 20px
    box-sizing:border-box
    background-color:#fff
    margin:15px 0
    box-shadow: 1px 1px 1px #999
    .title
      margin:20px 0 15px 0
      font-size:16px
      color:#999
    .rows
      width:50%     
      .images
        position:relative
        border: 1px solid #ababab;
        height: 160px;
        width: 120px;
        margin-bottom:15px
        text-align: center;
        .addimg
          margin: 50px auto 15px
          display: inline-block
          width: 30px
          height: 30px
        .imgshow
          position: absolute
          top: 0
          left: 0
          width: 122px
          height: 162px
        .avatar-uploader
          position: absolute
          top: 0
          left: 0
          width: 100%
          height: 100%
          cursor: pointer
          overflow: hidden
          opacity:0
        .show
          width:120px;
          height:160px;
          background:rgba(0,0,0,.3);
          top:0px;
          position:absolute;
          opacity: 0;
          display: block;
          font-size: 12px;
          transition: 0.3s;
          -webkit-transition: .2s;
          -moz-transition: .2s;
          .look
            color:#fff
            font-size:14px
            text-decoration:underline
            height:135px
            line-height:135px
            cursor:pointer
          .again
            color:#008AFA
            font-size:12px
            text-decoration:underline
            height:25px
            line-height:25px
            background:rgba(255,255,255,.3)
            cursor:pointer          
      .images:hover
        .show
          opacity: 1;
        .text-contain
          width: 120px;
    .tips
      padding-top: 15px
      padding-bottom:15px
      margin-bottom:15px
      box-sizing:border-box
      border-bottom:1px solid #d8d8d8
      color: #666
      font-size: 12px
      width:50%
    .bottom-btn
      margin-top:30px
      padding-top:30px
      box-sizing:border-box
      border-top:1px solid #ABABAB
  .el-form-item
    margin-top: 15px
  .form
    width:50%
    margin-top:30px
    height:380px
  .el-form-item__label
    color:#333
  .success_contain
    padding:160px 0 250px 0;
    box-sizing:border-box
  .grid-content
    img
      width:70px
      height:77px
    h3
      font-size:22px
      color:#333
      margin-bottom:10px
    p
      font-size:14px
      color:#666
  
      

    
</style>
